<template>
    <div style="min-width:809px">
        <div v-if="$route.path == '/staff'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item>
                        <el-input placeholder="请输入姓名或手机号" v-model="paging.keys"
                            @keyup.enter.native="handleCurrentChange" clearable>
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <p slot="append" @click="handleCurrentChange(1)">查询</p>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-select v-model="paging.status" style="width: 200px" filterable clearable>
                            <el-option label="正常" :value="1"> </el-option>
                            <el-option label="禁用" :value="0"> </el-option>
                            <!-- <el-option label="注销" :value="-1"> </el-option> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box ">
                    <!-- <div class="title-left"> 分销列表 </div> -->
                    <el-button icon="el-icon-plus" type="primary" @click="$router.push('/addStaff')">新增</el-button>
                    <el-button @click="dialogVisible = true" style="margin-left:auto;" icon="el-icon-upload2"
                        type="primary">导入</el-button>
                    <el-button v-if="utils.getIsShopowner()" @click="exportFn" icon="el-icon-download" type="primary">导出
                    </el-button>
                </div>
                <el-table @selection-change="selectionLineChangeHandle" ref="tab" v-loading="loading" :data="tableData"
                    header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column width="55px" type="selection" align="center"></el-table-column>
                    <el-table-column width="50px" label="序号" prop="id" align="center"></el-table-column>
                    <el-table-column prop="number" label="工号" align="center"> </el-table-column>
                    <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
                    <el-table-column prop="gender" label="性别" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.gender == 1 ? '男' : '女' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号" min-width="160" align="center"> </el-table-column>
                    <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
                    <el-table-column prop="position.name" label="岗位" align="center"> </el-table-column>
                    <el-table-column prop="base_money" label="底薪" align="center"> </el-table-column>
                    <el-table-column prop="into_date" label="入职时间"  min-width="160" align="center"> </el-table-column>
                    <el-table-column  prop="into_date" label="状态" width="90" align="center"
                        show-overflow-tooltip>
                        <template slot-scope="scope">{{
                            scope.row.status | staffFilter
                        }}</template>
                    </el-table-column>
                    <el-table-column fixed="right" width="160" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(scope.row)" class="tab-red-text">详情</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>

        <!-- 导入 -->
        <el-dialog title="导入员工" :visible.sync="dialogVisible" width="400px">
            <div>1.请点击下载导入模板 </div>
            <el-button size="small" type="primary" @click="uploadTem" style="margin: 30px auto;">下载导入模板</el-button>
            <div style="margin-bottom:30px;">2.点击上传Excel文件</div>
            <el-upload name="files" :limit='1' class="upload-demo" :headers='headers'
                :action='`${utils.data.baseURL}store/upload`' multiple :before-upload="beforeAvatarUpload"
                :on-remove="handleRemove" :on-success='handleSuccess' :file-list="fileList">
                <el-button class="blue" type="primary" icon="el-icon-circle-plus-outline" size="small">上传文件</el-button>
            </el-upload>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="commit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
    data() {
        return {
            fileList: [],
            dialogVisible: false,
            loading: false,
            paging: {
                status:"",
                keys: '', //姓名
                page: 1,
                total: 0,
                limit: 100,
            },
            tableData: [],
            selectItem: [],
            headers: {
                'x-store-token': getToken()
            },
        };
    },
    created() {
        if (this.$route.path == '/staff') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        //下载模板
        uploadTem() {
            let url = this.utils.data.baseURL + 'store/staff/getQuotationTmp'
            this.utils.urlToBlob(url, "员工导入模板")
        },
        // 确认导入
        async commit() {
            console.log(this.fileList);
            if (!this.fileList.length) {
                return this.$message.warning('请上传excel文件')
            }
            let { code, data } = await this.$Http.importStaff({
                path: this.fileList[0].url
            });
            if (code) {
                this.dialogVisible = false
                this.$message.success('导入成功')
                this.handleCurrentChange(1)
            }
        },
        // 上传成功回调
        handleSuccess(file, fileList) {
            console.log(file, fileList);
            if (file.code == 10000) {
                this.fileList.push({
                    name: fileList.name,
                    url: file.data,
                })
                this.$message.success('上传成功');
            } else {
                this.fileList.splice(this.fileList.length - 1, 1)
                this.$message.warning('上传失败');
            }
        },
        // 删除成功回调
        handleRemove(file) {
            for (let i in this.fileList) {
                if (this.fileList[i].uid == file.uid) {
                    this.fileList.splice(i, 1)
                    break
                }
            }
        },
        // 上传前回调
        beforeAvatarUpload(file) {
            let index = file.name.indexOf('.xlsx') || file.name.indexOf('.xls')
            const isLt2M = file.size / 1024 / 1024 < 20;

            if (index == -1) {
                this.$message.warning('请上传excel文件');
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传文件大小不能超过20M');
                return false
            }
            return true
        },
        selectionLineChangeHandle(val) {
            this.selectItem = val
            console.log(val);
        },
        // 导出
        async exportFn() {
            if (!this.selectItem.length) {
                return this.$message.warning('请选择需要导出的员工')
            }
            let arr = []
            for (let i in this.selectItem) {
                arr.push(this.selectItem[i].id)
            }
            let url = this.utils.data.baseURL + 'store/staff/exportStaff'
            this.utils.urlToBlob(url, "员工列表", { ids: arr.join(',') })

        },
        getAge(birthday) {
            return new Date(new Date().getTime() - new Date(birthday).getTime()).getFullYear() - 1970
        },
        async setRow(row) {
            this.$router.push(`/staffInfo?id=${row.id}`)
        },
        async repairGetList() {
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let { code, data } = await this.$Http.getStaff(obj);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
                for (let o of this.tableData) {
                    this.$set(o, 'age', this.getAge(o.birthday))
                }
            }
        },
        //重置
        reset() {
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.operation-box {
    display: flex;
}

.tab-red-text {
    color: #409eff;
}

::v-deep {
    .el-input-group__append {
        height: 40px;

        p {
            margin: 0;
            cursor: pointer;
        }
    }
}
</style>
